import React from 'react';
import {Checkbox, Modal, Tabs, Card, Input, Form} from 'antd';
import {FormComponentProps} from 'antd/es/form';
import {CheckboxChangeEvent} from 'antd/lib/checkbox';
import helps from '@/utils/helps';

const {TabPane} = Tabs;
const CheckboxGroup = Checkbox.Group;

interface IPros extends FormComponentProps {
  visible: boolean;
  onCancel: () => void;
  onOk: (params: { id: number; menus: number[] }) => void;
  allMenus: any[];
}

class Index extends React.Component<IPros> {
  checkChange = (e: CheckboxChangeEvent, items: any) => {
    const {form, allMenus} = this.props;
    const menus = form.getFieldValue('menus');
    const allMenusList = helps.treeToList(allMenus);
    console.log('getFieldValue');
    console.log(menus);
    const result = helps.findHei(allMenusList, items, e.target.checked, menus || []);
    console.log(result);
    setTimeout(() => {
      form.setFieldsValue({menus: result});
    }, 0);
  };

  // componentDidUpdate() {
  //   console.log('componentDidUpdate');
  // }

  // static getDerivedStateFromProps(props: IPros) {
  //   console.log('getDerivedStateFromProps');
  //   console.log(props);
  //   return {};
  // }


  render() {
    const {form, visible, onCancel, allMenus, onOk} = this.props;
    return (
      <Modal
        title={'标题'}
        visible={visible}
        onCancel={onCancel}
        width={'60%'}
        onOk={() => {
          form.validateFields((err, fieldsValue) => {
            if (!err) {
              onOk({id: fieldsValue.roleId, menus: fieldsValue.menus});
            }
          });

        }}
      >
        {form.getFieldDecorator('menus', {
          valuePropName: 'value'
        })(
          <CheckboxGroup>
            <Tabs defaultActiveKey="1" tabPosition={'left'}>
              {allMenus.map(firstItem => {
                return (
                  <TabPane
                    tab={
                      <>
                        <span style={{marginRight: 10}}>{firstItem.name}</span>
                        <Checkbox
                          value={firstItem.id}
                          onChange={(e: CheckboxChangeEvent) => {
                            this.checkChange(e, firstItem);
                          }}
                        />
                      </>
                    }
                    key={firstItem.id}
                  >
                    {firstItem.children
                      ? firstItem.children.map((secondItem: any) => {
                        return (
                          <div
                            style={{
                              background: '#ECECEC',
                              padding: '1px',
                              margin: '5px',
                              float: 'left',
                            }}
                            key={secondItem.id}
                          >
                            <Card
                              title={
                                <Checkbox
                                  value={secondItem.id}
                                  onChange={(e: CheckboxChangeEvent) => {
                                    this.checkChange(e, secondItem);
                                  }}
                                >
                                  {secondItem.name}
                                </Checkbox>
                              }
                              bordered={false}
                              style={{width: 300}}
                            >
                              {secondItem.children
                                ? secondItem.children.map((thirdItem: any) => {
                                  return (
                                    <p key={thirdItem.id}>
                                      <Checkbox
                                        value={thirdItem.id}
                                        onChange={(e: CheckboxChangeEvent) => {
                                          this.checkChange(e, thirdItem);
                                        }}
                                      >{thirdItem.name}</Checkbox>
                                    </p>
                                  );
                                })
                                : '无'}
                            </Card>
                          </div>
                        );
                      })
                      : '无'}
                  </TabPane>
                );
              })}
            </Tabs>
            ,
          </CheckboxGroup>,
        )}
        {form.getFieldDecorator('roleId')(<Input type={'hidden'}/>)}
      </Modal>
    );
  }
}

export default Form.create<IPros>()(Index);
